<template>
  <div class="scoreDetail">
    <div class="head">
      <a href="javascript:;" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回
      </a>
    </div>
    <div class="table">
      <el-table
        v-if="this.query.examPaperId ==0"
        :data="tableData"
        style="width: 100%;height:100%:font-size:18px"
        height="100%"
        row-class-name="body-font"
        header-row-class-name="header-bg"
      >
        <el-table-column prop="courseGradeRank" label="排名" align="center"></el-table-column>

        <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="courseGrade" label="分数" align="center"></el-table-column>
      </el-table>
      <el-table
        v-if="this.query.examPaperId !=0"
        :data="tableData"
        style="width: 100%;height:100%:font-size:18px"
        row-class-name="body-font"
        header-row-class-name="header-bg"
      >
        <el-table-column prop="examRank" label="排名" align="center"></el-table-column>
        <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="grade" label="分数" align="center"></el-table-column>
        <el-table-column prop="cz" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="goExamPager(scope.row)">查看成绩</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allData.length"
        :page-size="15"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  examClassCourseGradeRank,
  examClassCourseExamGradeRank
} from "@/api/exam";
export default {
  name: "ManageTraineeScoreDetail",
  data() {
    return {
      allData: [],
      tableData: [],
      query: {},
      currentPage: 1
    };
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    changePage(currentPage) {
      this.currentPage = currentPage;
      this.tableData = this.allData.slice(
        currentPage - 1 * 15,
        currentPage * 15
      );
    },
    goExamPager(row) {
      this.$router.push({
        path: "/manageTrainee/student/score/detail/examination/" + row.stuId,
        query: this.query
      });
    },
    init() {
      if (this.query.examPaperId == 0) {
        examClassCourseGradeRank({
          classId: this.query.classId,
          courseId: this.query.courseId
        }).then(res => {
          if (res.code == 1) {
            this.allData = res.response;
            this.changePage(1);
          }
        });
      } else {
        examClassCourseExamGradeRank({
          classId: this.query.classId,
          examPaperId: this.query.examPaperId
        }).then(res => {
          if (res.code == 1) {
            this.allData = res.response;
            this.changePage(1);
          }
        });
      }
    }
  },
  created() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    this.query = this.$route.query;
    this.init();
  },

  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (
        to.query.examPaperId != from.query.examPaperId ||
        to.query.courseId != from.query.courseId
      ) {
        this.query = this.$route.query;
        this.init(); //重新加载数据
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.scoreDetail {
  height: 100%;
  width: 100%;
  padding: 0 45px;
}
.head {
  line-height: 30px;
  font-size: 18px;
  margin-bottom: 10px;
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 10px 0;
  text-align: center;
}
.table {
  height: calc(100% - 92px);
  overflow: hidden;
}
</style>